<section >
    <!--<h2>Dish Management Page</h2><hr><br>-->
    <div style="position:absolute;width:100%;height:100%;background-attachment:fixed;
        background-image: url(http://10.222.29.181:8088/O2OFileServer/read/background/home.jpg);background-size:100% 100%;margin-top:-40px;">
        <form class="form-inline" id="searchfrom" style="margin-left:38%;margin-top:100px;">
            <button id="btnAdd" class="btn btn-success" data-toggle="modal"
                    ng-click="toAdd()"><span glyphicon glyphicon-ok aria-hidden="true"></span>增加菜品
            </button>
            <select class="form-control" id="dtype">
                <option value="所有类型">所有类型</option>
                <option value="小吃">小吃</option>
                <option value="酒水">酒水</option>
                <option value="主食">主食</option>
                <option value="套餐">套餐</option>
            </select>
            <input type="text" class="form-control" id="dname" placeholder="输入菜名"/>
            <button type="submit" class="btn btn-primary" ng-click="searchDish()">搜索</button>
        </form>
        <br><br>
        <table class="table table-bordered" style="width: 900px " align="center" >
            <thead>
            <tr>
                <th style="width:200px;">预览</th>
                <th>名称</th>
                <th>类型</th>
                <th>价格</th>
                <th style="width:200px;">操作</th>
            </tr>
            </thead>
            <tbody id="dishbody">
            <tr ng-repeat="dish in dishes">
                <td>
                    <img  src={{dish.img}} width="100" height="100"/>
                </td>
                <td>{{dish.name}}</td>
                <td>{{dish.type}}</td>
                <td>{{dish.price}}</td>
                <td>
                    <button class="btn btn-info" data-toggle="modal"  data-data={{dish}} ng-click="toUpdate($event.target)">Update</button>&nbsp;
                    <button class="btn btn-danger" data-toggle="modal"  data-data="{{dish}}" ng-click="toDelete($event.target)">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 菜品增加模态框 -->
    <div class="modal fade" id="toAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Add Dish</h4>
                </div>
                <div class="modal-body form-group">
                    <table>
                        <form class="form-inline">
                            <input type="hidden" name="id"/>
                            <div class="form-group">
                                <p>
                                    <label>名称：</label>
                                    <input type="text" class="form-control" name="dishName" placeholder="菜名" ng-model="dishName" id="addName">
                                </p>
                            </div>
                            <br>
                            <div class="form-group">
                                <p>
                                    <label>类型：</label>
                                    <select class="form-control" name="dishType" ng-model="dishType" id="addType">
                                        <option value="小吃">小吃</option>
                                        <option value="酒水">酒水</option>
                                        <option value="主食">主食</option>
                                        <option value="套餐">套餐</option>
                                    </select>
                                </p>
                            </div>
                            <br>
                            <div class="form-group">
                                <label>价格：</label>
                                <input type="number" class="form-control" name="price" placeholder="价格" ng-model="price" id="addPrice">
                            </div>
                            <br>
                            <div class="form-group">
                                <label>样图：</label>
                                <input type="file" name="dishImg" file-model="dishImg" class="btn-primary" id="addImg"/>
                                <p class="help-block">请上传图片</p>
                            </div>
                        </form>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="addDish" ng-click="addDish()">Add</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改模态框 -->
    <div class="modal fade" id="toUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Update Dish</h4>
                </div>
                <div class="modal-body form-group">
                    <table>
                        <form class="form-inline">
                            <input type="hidden" name="mid" value="" id="updateMid"/>
                            <input type="hidden" name="did" value="" id="updateDid"/>
                            <div class="form-group">
                                <p>
                                    <label>名称：</label>
                                    <input type="text" class="form-control" name="dishName" placeholder="菜名" ng-model="updateName" id="updateName">
                                </p>
                            </div>
                            <br>
                            <div class="form-group">
                                <p>
                                    <label >类型：</label>
                                    <select class="form-control" name="dishType" ng-model="updateType" id="updateType">
                                        <option value="小吃">小吃</option>
                                        <option value="酒水">酒水</option>
                                        <option value="主食">主食</option>
                                        <option value="套餐">套餐</option>
                                </select>
                                </p>
                            </div>
                            <br>
                            <div class="form-group">
                                <label >价格：</label>
                                <input type="number" class="form-control" name="price" placeholder="价格" ng-model="updatePrice" id="updatePrice">
                            </div>
                            <br>
                            <div class="form-group">
                                <label>样图：</label>
                                <input type="file" name="updateImg" file-model="updateImg" class="btn-primary"/>
                                <p class="help-block">请上传图片</p>
                            </div>
                        </form>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateDish" ng-click="updateDish()">Update</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除Modal -->
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Delete</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="did" value="" id="delInput"/>
                    <div class="modal-body">
                        <h4>确定删除此条数据？</h4>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="makedelete" ng-click="deleteDish()">Sure</button>
                </div>
            </div>
        </div>
    </div>

</section>